/**
*@file 主页内容容器
*@author qiu(423822728@qq.com)
*/
<template>
  <div class="page">
      <transition name="fade">
        <side-nav  :nav="nav" v-if="sideShow"></side-nav>
      </transition>
       <!-- main container -->
        <div class="content">
            <!-- header nav -->
            <header class="navbar-header " >
                <el-button  class=" hidden-sm-and-up navbar-icon" icon="el-icon-plus" @click.stop="toggleNav" ></el-button>
            </header>
            <div class="container content-main">
                <input type="text" v-model="form.title" placeholder="title">
               <select v-model="form.type">
                   <option>text</option>
                   <option>number</option>
                     <option>textarea</option>
               </select>
                <form-option :type="form.type" :title="form.title" v-model="form.value" ></form-option>
                <transition name='show' mode="out-in" appear >
                    <router-view ></router-view>
                </transition>
            </div>
        </div>
        <!-- end main container -->
  </div>
</template>
<script>
import SideNav from "components/SideNav.vue";
import FormOption from "components/FormOption.vue";
export default {
  data() {
    return {
      form: {
        type: "",
        title: "名称",
        value: ""
      },
      sideShow: true,
      nav: [
        //侧栏菜单
        {
          title: "标准课程管理",
          path: "/"
        }
      ]
    };
  },
  created() {
    //检测窗口大小
    let win = window.outerWidth;
    if (win <= 768) {
      this.sideShow = false;
      //全局方法
      var that = this;
      this.$nextTick(function() {
        //点击全局隐藏
        document
          .querySelector(".content")
          .addEventListener("click", function() {
            that.hideNav();
          });
      });
    }
  },
  methods: {
    toggleNav() {
      return (this.sideShow = !this.sideShow);
    },
    hideNav() {
      this.sideShow = false;
    }
  },
  components: { SideNav, FormOption }
};
</script>
